<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

	<head>
		<title>The Gimme Javascript Library :: Demo Page</title>

		<script type = "text/javascript" src = "../build/debug/gimme.js"></script>
		<script type = "text/javascript">
			g(window).addEvent('load', function(e)
			{
				var a, quickNav = g('#quick_nav').element();
				g('#main li > a[id^="question"]').iterate(function(i)
				{
					var el = this.element();
					a = document.createElement('a');
					a.href = '#' + el.id;
					a.appendChild(document.createTextNode(el.id));
					quickNav.appendChild(a);
					quickNav.appendChild(document.createTextNode(' | '));
				});
				
				var chooser = g('#demoChooser');
				chooser.addEvent('change', function(e)
				{
					g('#gimmeDemos').setStyle('display', 'block').element().className = chooser.getValue();
				});
				
				g('#gimmeDemos > pre').iterate(function(i)
				{
					var id = this.element().id;
					var op = document.createElement('option');
					op.value = id;
					op.appendChild(document.createTextNode(id.replace(/_/g, ' ')));
					chooser.element().appendChild(op);
				});
				
				g('#choose').addEvent('click', function(e)
				{
					if (chooser.getValue() !== 'none')
					{
						g('#gimmeDemos').setStyle('display', '').removeClass(chooser.getValue());
						var id = chooser.element().value;
						window.eval(g('#' + id).getHTML());
					}
				});
			});
		</script>
		
		<link rel = "stylesheet" type = "text/css" href = "./assets/css/gimme.css" />		
		<link rel = "stylesheet" type = "text/css" href = "./assets/css/page.css" />
		<!--[if IE]><link rel = "stylesheet" type = "text/css" href = "./assets/css/ie.css" /><![endif]-->		
		
	</head>

	<body>
		
		<div id = "container">
			
			<div id = "masthead">
				<img class = "logo" src = "./assets/img/gimme_logo.png" alt = "The Gimme ECMAScript Library" />
				<h1><span>The Gimme Javascript Library</span></h1>
				<h2><span>Taking the pain out of the Javascript</span></h2>
				
				<div id = "nav">
					<ul>
						<li><a href = "./">Home</a></li>
						<li><a href = "./about.html">About</a></li>
						<li>Demo Page</li>
						<li><a href = "./selectortest.html">Selector Test Page</a></li>
						<li><a href = "./faq.html">FAQ</a></li>
					</ul>
					<div class = "clear"></div>
				</div>
			</div>

			<a id = "top"></a>
			<div id = "main">
				<select id = "demoChooser">
					<option value = "none">--Select a demo--</option>
				</select>
				<button id = "choose">Run Demo</button>
				
				<h1>Gimme Demo Page</h1>
				
				<fieldset id = "quick_nav">
					<legend>Quick Nav</legend>
				</fieldset>
				
				<ol>
					<li><a id = "question1"></a>
					<h2>Question 1</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>
					
					<li><a id = "question2"></a>
					<h2>Question 2</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>
					
					<li><a id = "question3"></a>
					<h2>Question 3</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>
					
					<li><a id = "question4"></a>
					<h2>Question 4</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>

					<li><a id = "question5"></a>
					<h2>Question 5</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>
					
					<li><a id = "question6"></a>
					<h2>Question 6</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>
					
					<li><a id = "question7"></a>
					<h2>Question 7</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>
					
					<li><a id = "question8"></a>
					<h2>Question 8</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>					
					<a href = "#top">Top</a></li>
					
					<li><a id = "question9"></a>
					<h2>Question 9</h2>
					<p class = "question1">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>
					
					<li><a id = "question10"></a>
					<h2>Question 10</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>
					
					<li><a id = "question11"></a>
					<h2>Question 11</h2>
					<p class = "question3">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>
					
					<li><a id = "question12"></a>
					<h2>Question 12</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>

					<li><a id = "question13"></a>
					<h2>Question 13</h2>
					<p class = "question5">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>
					
					<li><a id = "question14"></a>
					<h2>Question 14</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>
					
					<li><a id = "question15"></a>
					<h2>Question 15</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a href = "#top">Top</a></li>
					
					<li><a id = "question16"></a>
					<h2>Question 16</h2>
					<p class = "question">Lorem ipsum has cu putent melius, utamur ocurreret vis in. Audire numquam pri ex, eam unum mutat ea.
					Harum percipitur vim et, soluta utamur tibique quo ut. Mea dicta solet noluisse ex, eum ut erat essent oblique.
					Dicat corrumpit at mel, eam agam fuisset eu, sed numquam nominavi assentior ea. In eros indoctum convenire quo.</p>
					
					<p class = "answer">Iudico civibus corpora eos ea, partem euismod perfecto an duo. Ex facer ancillae vix.
					Vel ne omnium percipit, ei posse interpretaris qui. In eam quem tempor aperiam.</p>
					<a id = "goingUp" href = "#top">Top</a></li>
				</ol>
				
				<div id = "gimmeDemos">
<pre id = "mouseover_opacity_demo">
/* DESCRIPTION:
Sets the opacity of all &lt;p&gt; elements that have the class "question"
to .4 when said &lt;p&gt; element's parent &lt;li&gt; element is moused over.
(Process is reverted on mouseout)
*/

g('#main ol li').addEvent('mouseover', fn).addEvent('mouseout', fn);
function fn(e)
{
	var opacity = e.type === 'mouseover' ? .4 : 1;
	g(this).select('p.question').setStyle('opacity', opacity);
}</pre>

<pre id = "addClass_demo">
/* DESCRIPTION:
Add the class "pretty" to all &lt;li&gt; elements beneath the #main element
*/

g('#main li').addClass('pretty');</pre>

<pre id = "removeClass_demo">
/* DESCRIPTION:
Removes the class "pretty" from all &lt;li&gt; elements beneath the #main element
*/

g('#main li').removeClass('pretty');</pre>

<pre id = "swapClass_demo_1">
/* DESCRIPTION:
Swaps the class "question" with the class "sillyQuestion" on all
&lt;p&gt; elements beneath #main ol li
*/

g('#main ol li p.question').swapClass('question', 'sillyQuestion');</pre>

<pre id = "swapClass_demo_2">
/* DESCRIPTION:
Swaps the class "sillyQuestion" with the class "question" on all
&lt;p&gt; elements beneath #main ol li
*/

g('#main ol li p.sillyQuestion').swapClass('sillyQuestion', 'question');</pre>

<pre id = "scrollTo_demo">
/* DESCRIPTION:
Intercept the default action of all &lt;a&gt; tags in #quick_nav whose
href attribute begin with "#" and causes the page to scroll to
the corresponding anchor (instead of the normal "jump")
*/

g('a[href^=#]').addEvent('click', function(e)
{
	e.preventDefault();
	g(g(this).readAttribute('href')).scrollTo('slowly', 'SLIDE_ID');
});</pre>

				</div>
				
				<div id = "corner1"></div>
				<div id = "corner2"></div>
				<div id = "corner3"></div>
				<div id = "corner4"></div>				
			</div>
			
			<div id = "footer">
				:: The Gimme ECMAScript Library by Stephen Stchur :: Copyright (c) Microsoft, Corp. All rights reserved. ::
			</div>
			
			<div id = "extra1"><span></span></div>
			<div id = "extra2"><span></span></div>
			<div id = "extra3"><span></span></div>
			<div id = "extra4"><span></span></div>
		</div>
		
	</body>

</html>